<template>
  <div class="partners">
    <img
      class="element"
      alt="Element"
      src="/images/pages/codequest/partners/berkeley.webp"
    >
    <img
      class="element"
      alt="Element"
      src="/images/pages/codequest/partners/stanford.webp"
    >
    <img
      class="element"
      alt="Element"
      src="/images/pages/codequest/partners/google.webp"
    >
    <img
      class="element"
      alt="Uc berkeley symbol"
      src="/images/pages/codequest/partners/xmoonshot.webp"
    >
    <img
      class="element"
      alt="Img"
      src="/images/pages/codequest/partners/apple.webp"
    >
    <img
      class="element"
      alt="Element"
      src="/images/pages/codequest/partners/codecombat.webp"
    >
    <img
      class="element"
      alt="Element"
      src="/images/pages/codequest/partners/sea.webp"
    >
    <img
      class="element"
      alt="Uc berkeley symbol"
      src="/images/pages/codequest/partners/china-stem.webp"
    >
    <img
      class="element"
      alt="Uc berkeley symbol"
      src="/images/pages/codequest/partners/ai4kids.webp"
    >
    <img
      class="element"
      alt="Uc berkeley symbol"
      src="/images/pages/codequest/partners/nespace.webp"
    >
  </div>
</template>

<script>
export default {
  name: 'PartnersComponent'
}
</script>

<style scoped>
.partners {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 60px 60px;
  justify-content: space-around;
  padding: 160px 0px 60px;
  position: relative;
}

.partners .element {
  height: 60px;
  position: relative;
}

</style>
